<template lang="pug">
  .sold
    .Popup-one(v-show='pop_one')
      .Popup-one-top {{sells}}
      .Popup-one-bottom
        img(src='static/image/X-btn.png' @click='closepop_one(false)')
        img(src='static/image/Accept-btn.png' @click='closepop_one(true)')
    .content
      .title 售出
      .amount
        .goods1
          span.g1-title(data-title="参王:") 参王:
          ul
            li
              span(data-title="一类参王") 一类参王
              .g1-amount
                //- input(type='text') {{list.sengking1 || 0}}
                input(type='text' v-model='oneVal').oneGinseng
                //- span(data-title="") {{userInfo?userInfo.one_ginseng:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="oneVal<list[0] && oneVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="oneVal>0 && oneVal--")
            li
              span(data-title="二类参王") 二类参王
              .g1-amount
                //- span(data-title="") {{list.sengking2 || 0}}
                input(type='text' v-model='twoVal' ).twoGinseng
                //- span(data-title="") {{userInfo?userInfo.two_ginseng:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="twoVal<list[1] && twoVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="twoVal>0 && twoVal--")
            li
              span(data-title="三类参王") 三类参王
              .g1-amount
                //- span(data-title="") {{list.sengking3 || 0}}
                input(type='text' v-model='threeVal').threeGinseng
                //- span(data-title="") {{userInfo?userInfo.three_ginseng:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="threeVal<list[2] && threeVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="threeVal>0 && threeVal--")
        .goods1
          span.g1-title(data-title="极品参:") 极品参:
          ul
            li
              span(data-title="一类参王") 一类参王
              .g1-amount
                //- span(data-title="") {{list.sengbest1 || 0}}
                input(type='text' v-model='oneBestVal').oneBestGinseng
                //- span(data-title="") {{userInfo?userInfo.one_best_ginsen:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="oneBestVal<list[3] && oneBestVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="oneBestVal>0 && oneBestVal--")
            li
              span(data-title="二类参王") 二类参王
              .g1-amount
                //- span(data-title="") {{list.sengbest2 || 0}}
                input(type='text' v-model='twoBestVal').twoBestGinseng
                //- span(data-title="") {{userInfo?userInfo.two_best_ginsen:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="twoBestVal<list[4] && twoBestVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="twoBestVal>0 && twoBestVal--")
            li
              span(data-title="三类参王") 三类参王
              .g1-amount
                //- span(data-title="") {{list.sengbest3 || 0}}
                input(type='text' v-model='threeBestVal').threeBestGinseng
                //- span(data-title="") {{userInfo?userInfo.three_best_ginsen:0}}
                .arrow
                  img(src="static/image/z_arrowup.png" class="up" @click="threeBestVal<list[5] && threeBestVal++")
                  img(src="static/image/z_arrowd.png" class="down" @click="threeBestVal>0 && threeBestVal--")
      .worth
        .goods1
          //- span.g1-title(data-title="提币地址:") 提币地址:
          //- span.g2
          //-   input( v-model='value' )
        span.w-title(data-title="总价值：") 总价值：
        .w-confirm
          span.value(data-title="") {{(listmost || 0)+gametype}}
          .w-btn(data-title="立即售出" @click='sell') 立即售出
          p
            span.choice()
            span.rules(data-title="我已阅读活规则，充值金额不可体现、退款") 我已阅读活规则，充值金额不可体现、退款

  //
</template>
<script>
import $ from "jquery";

export default {
  name: "chief",
  data() {
    return {
      gametype: u.getStore("winning").type,
      choose: false,
      listTwo: u.getStore("seed") || {},
      userInfo: u.getStore("userInfo"),
      pop_one: false,
      listmore: 0,
      sells: "售出成功",
      value: "",
      sellflag: false,
      oneVal: u.getStore("userInfo").one_ginseng,
      twoVal: u.getStore("userInfo").two_ginseng,
      threeVal: u.getStore("userInfo").three_ginseng,
      oneBestVal: u.getStore("userInfo").one_best_ginsen,
      twoBestVal: u.getStore("userInfo").two_best_ginsen,
      threeBestVal: u.getStore("userInfo").three_best_ginsen,
      id: 0, //游戏主键
      list: [
        u.getStore("userInfo").one_ginseng,
        u.getStore("userInfo").two_ginseng,
        u.getStore("userInfo").three_ginseng,
        u.getStore("userInfo").one_best_ginsen,
        u.getStore("userInfo").two_best_ginsen,
        u.getStore("userInfo").three_best_ginsen
      ]
    };
  },

  created() {
    let timer = setInterval(() => {
      if (u.flag) {
        this.userInfo = u.getStore("userInfo");
        console.log(this.userInfo);
        clearInterval(timer);
      }
    }, 10);
  },
  computed: {
    //汇率
    listmost() {
      return (
        this.oneVal * u.getStore("winning").oneGinseng +
        this.twoVal * u.getStore("winning").twoGinseng +
        this.threeVal * u.getStore("winning").threeGinseng +
        this.oneBestVal * u.getStore("winning").oneBestGinseng +
        this.twoBestVal * u.getStore("winning").twoBestGinseng +
        this.threeBestVal * u.getStore("winning").threeBestGinseng
      );
    }
  },

  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },
  methods: {
    closepop_one(d) {
      this.pop_one = false;
      if (!d) {
        return;
      }
      u.exchangeRecharge({
          phone: u.getStore("user").userid,
          num: this.listmost,
          tokenType: u.getStore("winning").type,
        },data=>{
          if(data.code==200){
            u.sellAny(
              {
                oneGinseng: this.oneVal || 0,
                twoGinseng: this.twoVal || 0,
                threeGinseng: this.threeVal || 0,
                oneBestGinseng: this.oneBestVal || 0,
                twoBestGinseng: this.twoBestVal || 0,
                threeBestGinseng: this.threeBestVal || 0,
                type: 1,
                phone: u.getStore("user").userid
              },
              data => {
                this.id = data[0].id;
                if(data[0].code==200){
                  u.updateSell({
                    id: this.id,
                    isPass: 1,
                  },data=>{
                    if(data[0].code==200){
                      this.$parent.loading({
                        message: "售出成功，已提现到交易所",
                        type: true
                      });
                      setTimeout(() => {
                        this.$router.push({ path: "/assets" });
                        window.location.reload();
                      },2000);
                    }else{
                      this.$parent.loading({
                        message: "售出失败",
                        type: false
                      });
                    }
                  })
                }else{
                  this.$parent.loading({
                    message: "售出失败",
                    type: false
                  });
                }

                /*//交易所售出接口
                u.sellJiao(
                  {
                    remittanceMode: this.gametype,
                    tokenType: this.gametype,
                    phone: u.getStore("user").name,
                    num: this.listmost,
                    remarks: "售出人参",
                    bag_id: this.id
                  },
                  data => {
                    if (data && data.code == "200") {
                      this.$parent.loading({
                        message: "奖品已经售出，等待审核中",
                        type: true
                      });
                      setTimeout(() => {
                        this.$router.push({ path: "/assets" });
                        window.location.reload();
                      },1200);
                    } else {
                      // alert(data.message);
                      this.$parent.loading({
                        message: data.message,
                        type: false
                      });
                    }
                  }
                );*/
              }
            );
          }else{
            this.$parent.loading({
              message: "售出失败",
              type: false
            });
          }
      })
    },
    rule() {
      if (this.choose === false) {
        document.getElementsByClassName("choice")[0].style.background =
          "url('../../../static/image/z_ok.png') no-repeat";
        this.choose = !this.choose;
      } else {
        document.getElementsByClassName("choice")[0].style.background =
          "url('../../../static/image/radio.png') no-repeat";
        this.choose = !this.choose;
      }
    },
    getVal(e) {
      console.log(e.target.val());
    },
    sell() {
      var that = this;
      if (this.sellflag) return;
      this.sellflag = true;
      setTimeout(() => {
        this.sellflag = false;
      }, 2000);
      console.log(u.getStore("userInfo"));
      //判断人参的数量
      if (
        this.oneVal +
          this.twoVal +
          this.threeVal +
          this.oneBestVal +
          this.twoBestVal +
          this.threeBestVal <=
        0
      ) {
        // alert("售出数量不能小于0");
        this.$parent.loading({
          message: "售出数量不能小于0",
          type: false
        });
        return;
      } else if (this.oneVal > u.getStore("userInfo").one_ginseng) {
        this.oneVal = u.getStore("userInfo").one_ginseng;
        // alert("售出数量不能大于余额数量");
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      } else if (this.twoVal > u.getStore("userInfo").two_ginseng) {
        this.twoVal = u.getStore("userInfo").two_ginseng;
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      } else if (this.threeVal > u.getStore("userInfo").three_ginseng) {
        this.threeVal = u.getStore("userInfo").three_ginseng;
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      } else if (this.oneBestVal > u.getStore("userInfo").one_best_ginsen) {
        this.oneBestVal = u.getStore("userInfo").one_best_ginsen;
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      } else if (this.twoBestVal > u.getStore("userInfo").two_best_ginsen) {
        this.twoBestVal = u.getStore("userInfo").two_best_ginsen;
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      } else if (this.threeBestVal > u.getStore("userInfo").three_best_ginsen) {
        this.threeBestVal = u.getStore("userInfo").three_best_ginsen;
        this.$parent.loading({
          message: "售出数量不能大于余额数量",
          type: false
        });
        return;
      }
      this.pop_one = true;
      this.sells = "是否确认出售";
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
// .changenumber {
// background-color: transparent;
// border: 0;
// width: 57%;
// font-size: 20px;
// color: #fff;

// &:focus {
// outline: none;
// }
// }
.Popup-one {
  background: url('../../../static/image/Panel.png') no-repeat;
  height: 210px;
  width: 460px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
  z-index: 1000;

  .Popup-one-top {
    text-shadow: 0 2px #505050, 2px 0 #505050, -2px 0 #505050, 0 -1px #505050;
    height: 150px;
    font-size: 28px;
    color: #fff;
    line-height: 150px;
  }

  .Popup-one-bottom {
    img:nth-of-type(1) {
      margin-right: 40px;
    }

    img:nth-of-type(2) {
      margin-left: 40px;
    }
  }
}

.sold {
  padding-top: 20px;
  width: 100%;
  min-width: 1200px;
  min-height: 968px;
  background-image: url('../../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    margin: 0 auto;
    padding: 43px 33px;
    max-width: 1290px;
    height: 652px;
    background-image: url('../../../static/image/soldbg.png');
    background-size: 100% 100%;

    .title {
      position: relative;
      font-size: 24px;
      color: white;
      z-index: 0;

      &:before {
        content: '售出';
        position: absolute;
        -webkit-text-stroke: 4px #a56a2c;
        z-index: -1;
      }
    }

    .amount {
      margin-top: 27px;

      .goods1 {
        display: inline-block;

        &:first-child {
          margin-right: 120px;
        }

        .g1-title {
          display: inline-block;
          width: 120px;
          position: relative;
          font-size: 18px;
          color: white;
          z-index: 0;
          vertical-align: top;

          &:before {
            content: attr(data-title);
            position: absolute;
            -webkit-text-stroke: 3px #3a230a;
            z-index: -1;
          }
        }

        ul {
          display: inline-block;
          vertical-align: top;

          li {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-size: 20px;
            color: white;

            >span {
              position: relative;
              z-index: 0;

              &:before {
                content: attr(data-title);
                position: absolute;
                -webkit-text-stroke: 3px #a56a2c;
                z-index: -1;
              }
            }

            .g1-amount {
              margin-left: 27px;
              padding-left: 15px;
              display: inline-block;
              width: 120px;
              height: 41px;
              line-height: 41px;
              background-image: url('../../../static/image/z_8.png');

              >input {
                position: relative;
                z-index: 0;
                width: 60%;
                height: 90%;
                top: -0.5px;
                border: none;
                background: url('../../../static/image/z_8.png') center no-repeat;
                font-size: 20px;
                color: #fff;
                text-shadow: 0 2px #505050, 2px 0 #505050, -2px 0 #505050, 0 -1px #505050;

                &:focus {
                  outline: none;
                }

                &:before {
                  content: attr(data-title);
                  position: absolute;
                  -webkit-text-stroke: 4px #505050;
                  z-index: -1;
                }
              }

              .arrow {
                display: inline-block;
                float: right;
                margin: 6px 15px;

                >img {
                  display: block;
                  margin: 4px 0;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }

  .worth {
    margin-top: 45px;

    .goods1 {
      display: block;
      line-height: 50px;
      margin-bottom: 60px;

      &:first-child {
        margin-right: 120px;
      }

      .g1-title {
        display: inline-block;
        width: 120px;
        position: relative;
        font-size: 18px;
        color: white;
        z-index: 0;
        vertical-align: top;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #3a230a;
          z-index: -1;
        }
      }

      .g2 {
        display: inline-block;
        width: 63%;
        height: 50px;
        background: url('../../../static/image/http.png') no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        input {
          width: 95%;
          background-color: transparent;
          border: 0;
          height: 100%;
          font-size: 18px;
          font-weight: 700;
          color: white;

          &:focus {
            outline: none;
          }

          &:before {
            content: attr(data-title);
            position: absolute;
            -webkit-text-stroke: 3px #3a230a;
            z-index: -1;
          }
        }
      }
    }

    .w-title {
      display: inline-block;
      position: relative;
      font-size: 18px;
      color: white;
      z-index: 0;
      vertical-align: top;

      &:before {
        content: attr(data-title);
        position: absolute;
        -webkit-text-stroke: 3px #3a230a;
        z-index: -1;
      }
    }

    .w-confirm {
      display: inline-block;
      vertical-align: top;

      .value {
        margin-left: 12px;
        display: inline-block;
        position: relative;
        font-size: 22px;
        color: white;
        z-index: 0;
        text-shadow: 0 2px red, 2px 0 red, -2px 0 red, 0 -1px red;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #ca4737;
          z-index: -1;
        }
      }

      .w-btn {
        margin: 16px 0;
        position: relative;
        width: 146px;
        height: 43px;
        text-align: center;
        font-size: 14px;
        color: white;
        line-height: 37px;
        z-index: 0;
        background-image: url('../../../static/image/z_1.png');
        cursor: pointer;

        &:before {
          content: attr(data-title);
          position: absolute;
          -webkit-text-stroke: 3px #9c130b;
          z-index: -1;
        }
      }

      p {
        display: flex;
        align-items: center;

        .choice {
          margin: 0 5px;
          display: inline-block;
          width: 32px;
          height: 33px;
          background: url('../../../static/image/z_ok.png') no-repeat;
        }

        .rules {
          position: relative;
          font-size: 16px;
          color: white;
          z-index: 0;

          &:before {
            content: attr(data-title);
            position: absolute;
            -webkit-text-stroke: 2px #a56a2c;
            z-index: -1;
          }
        }
      }
    }
  }
}
</style>
